<template>
  <div class="newAlbums">
    <h1>新碟上架</h1>
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item,i) in newAlbumsFirst" :key="i">
        <img :src="item.coverUrl" :alt="item.albumName" @click="toAlbumDetails(item.albumId)">
        <div class="albumName" @click="toAlbumDetails(item.albumId)">{{item.albumName}}</div>
        <div class="artistName">{{item.artistName}}</div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item,i) in newAlbumsSecond" :key="i">
        <img :src="item.coverUrl" :alt="item.albumName" @click="toAlbumDetails(item.albumId)">
        <div class="albumName" @click="toAlbumDetails(item.albumId)">{{item.albumName}}</div>
        <div class="artistName">{{item.artistName}}</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getNewAlbums } from "../../../network/home"

export default {
  name: "NewAlbums",
  data() {
    return {
      newAlbumsFirst: [],
      newAlbumsSecond: [],
    };
  },
  created() {
    this.getNewAlbums(0, 8);
  },
  methods: {
    getNewAlbums(offset, limit) {
      getNewAlbums(offset, limit).then(res => {
        this.newAlbumsFirst = res.data.products.slice(0, 4);
        this.newAlbumsSecond = res.data.products.slice(4);
      });
    },
    toAlbumDetails(id) {
      this.$router.push({ name: "AlbumDetails", params: { id: id } });
    },
  }
}
</script>

<style scoped>
.newAlbums {
  background: -webkit-linear-gradient(
    top,
    RGB(246, 246, 246),
    RGB(255, 255, 255)
  );
  padding: 10px 40px;
  margin: 30px 50px 0px 50px;
}
.newAlbums h1 {
  text-align: center;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
img {
  width: 100%;
  height: 100%;
}
.albumName {
  font-size: 1rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.albumName:hover {
  color: RGB(64, 158, 255);
}
.artistName {
  font-size: 1rem;
  color: RGB(153, 153, 153);
  margin-bottom: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
}
.artistName:hover {
  color: RGB(64, 158, 255);
}
</style>